<template>
	<view class="feedback-page">
		<view class="feedback-textarea">
			<textarea
				:value="textarea"
				:maxlength="maxlength"
				:disable-default-padding="true"
				placeholder="请输入遇到的问题或建议..."
				class="textarea-content"
				@input="valueChange"
			/>
			<view class="textarea-num">{{ valueLength }} / {{ maxlength }}</view>
		</view>
		<view
			v-if="quetions.length"
			class="feedback-list"
		>
			<view
				v-for="(item, index) in quetions"
				:key="index"
				class="feedback-item"
				:class="{
					active: selectQuetion.id === item.id
				}"
				@click="choose(item)"
			>
				<view class="feedback-text">
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="contact-information">
			<input
				:value="tel"
				type="tel"
				maxlength="11"
				placeholder="联系方式：（选填，方便我们与您联系）"
				class="tel-input"
				@input="telChange"
			/>
		</view>
		<view class="button-content">
			<view
				class="button"
				@click="submit"
			>
				<text>提交</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	computed: {
		valueLength () {
			return this.textarea.length
		}
	},
	data () {
		return {
			textarea: '',
			tel: '',
			maxlength: '400',
			quetions: [],
			selectQuetion: {},
			loading: false,
		}
	},
	methods: {
		async getFeedbackTypeList () {
			const [res] = await this.$apis.getFeedbackTypeList()
			if (res._errCode === '0') {
				this.quetions = res._data.typeList || []
			}
		},
		async submit () {
			if (this.loading) return
			if (!this.textarea) {
				return uni.showToast({
					title: '请输入反馈的内容',
					icon: 'none'
				})
			}
			if (!this.selectQuetion.id) {
				return uni.showToast({
					title: '请选择反馈的类型',
					icon: 'none'
				})
			}
			this.loading = true
			uni.showLoading({
				title: '提交中',
				mask: true
			})
			const [res] = await this.$apis.submitFeedback({
				content: this.textarea,
				typeId: this.selectQuetion.id,
				contact: this.tel,
				brand: this.$store.state.systemInfo.brand || 'iPhone',
				model: this.$store.state.systemInfo.model || 'iPhone',
				version: 'v1.0.0'
			})
			this.loading = false
			uni.hideLoading()
			if (res._errCode === '0') {
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			} else {
				uni.showToast({
					title: res._errStr || '提交失败',
					icon: 'none'
				})
			}
		},
		valueChange (e) {
			this.textarea = e.detail.value
		},
		telChange (e) {
			this.tel = e.detail.value
		},
		choose (quetion) {
			if (quetion.id === this.selectQuetion.id) {
				this.selectQuetion = {}
			} else {
				this.selectQuetion = quetion
			}
		}
	},
	onLoad () {
		this.getFeedbackTypeList()
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
